<template>
  <div>
    <!-- 导航栏 -->
    <div class="body">
      <div class="nav">
        <van-nav-bar title="编辑收货地址" @click-left="onClickLeft" right-text left-text left-arrow />

        <!-- @click-right="onClickRight" -->
      </div>
      <van-address-edit
        :address-info="list"
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
  </div>
</template>
<script>
import areaList from "@/assets/address.js";
export default {
  data() {
    return {
      areaList: areaList,
      list: {}
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSave(content) {
      console.log(content);
      
      let url = "/address/edit";
      let data = content;
      this.$axios
        .post(url, data)
        .then(res => {
          this.$router.go(-1);
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    onDelete() {
      this.$router.push("./address/list");
    },
    getList(id) {
      let url = "/address/detail";
      let data = {
        addressId: id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          this.list = res.result;
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  created() {
    let id = this.$route.params.id;
    this.getList(id);
  }
};
</script>

<style lang="less">
  .van-switch--on{
  background-color:#ee0a24;
}
</style>
<style lang="less" scoped>

.body {
  height: 100vh;
  background: #f8f8f8;
  .nav {
    height: 56px;
    .van-nav-bar {
      height: 100%;
      line-height: 56px;
      .van-nav-bar__left {
        .van-icon {
          color: black;
        }
      }
    }
  }
}
.basics {
  height: 52px;
  line-height: 52px;
  margin-left: 15px;
  span {
    color: #afb7bc;
  }
}
</style>